<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- navbar -->
        <u-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" :fixed="true" 
            @leftClick="back" title="工资管理" rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <!-- select -->
        <uni-select class="uniselect" :style="{top:systemInfo.headerH+'px'}" 
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <view style="height:74rpx"></view>


        <!-- content -->
        <view class="uni-area">
            <!-- 工资概览 -->
            <view class="u-m-t-40 uni-shadow">
                <view class="u-flex u-row-between">
                    <text class="u-font-32 font-bold">工资概览</text>
                    <text class="u-font-26 uni-gery-color">单位：万元</text>
                </view>
                <view class="u-m-t-40 u-flex u-row-between">
                    <view v-for="(item,index) in wageGeneral" :key="index" class="u-flex u-flex-col">
                        <text class="u-m-b-14 u-font-24 uni-dec-color">{{item.title}}</text>
                        <text class="u-font-42 font-bold uni-higt-color">{{item.value}}</text>
                    </view>
                </view>
            </view>

            <!-- 项目统计 -->
            <view class="u-m-t-40 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="项目统计"/>
                <!-- 项目总数量 -->
                <view class="u-m-t-20 u-flex u-row-between u-p-l-20">
                    <text class="uni-dec-color font-bold">工资发放情况</text>
                    <text class="u-font-26 uni-gery-color">单位：万元</text>
                </view>
                <view style="height:400rpx">
                    <qiun-data-charts type="pie" :tooltipShow="true" tooltipFormat="tooltipDemo1"
                        :opts="projects.opts" :chartData="projects">
                    </qiun-data-charts>
                </view>
                <!-- 日期筛选 -->
                <view class="u-flex date-month" @tap="dateShow=true">
                    <text class="u-m-r-12 u-font-28">{{dateMonthText}}</text>
                    <u-icon name="arrow-down" color="#999" size="12"></u-icon>
                </view>
                <u-datetime-picker :show="dateShow" v-model="dateMonth" mode="year-month" :closeOnClickOverlay="true"
                    @cancel="dateShow=false" @close="dateShow=false" @confirm="confirm">
                </u-datetime-picker>
            </view>

            <!-- 工资信息 -->
            <view class="u-m-t-50 u-font-32 font-bold">工资信息</view>
            <uni-item-wage class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />
 

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                // 下拉选择数据
				selectData:[
                    { label: "属地", list: [], show: false, type: "districtId", value: '' },
                    { label: "项目类型", list: [], show: false, type: "xmtype", value: '' },
                ],
                // 筛选参数
                prameter:{
                    districtId:'', // 属地
                    xmtype: '', // 项目类型
                },
                // 工资概况
                wageGeneral:[
                    { title:'住建工资', value: 0 },
                    { title:'水利工资', value: 0 },
                    { title:'交通工资', value: 0 },
                    { title:'其他工资', value: 0 },
                ],
                // 项目统计
                dateShow: false,
                dateMonth: new Date().getTime(),
                dateMonthText: this.$tools.formatTime(new Date()).ym,
                projects:{
                    series: [
                        // {
                        //     data: [
                        //         // { name: "一师:50", value: 50 }
                        //     ],
                        //     format: 'yAxisDemo1', // 数据格式化
                        // }
                    ],
                },
                // 分页相关
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'loading',
                    total: 0,
                    list: [], // 列表
                },
			}
		},


        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getWgWageManage()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.prameter.districtId = res.value
            })
            // 项目类型
            this.$tools.getProTypeFn(this,res=>{
                this.selectData.splice(1,1,res)
                this.prameter.xmtype = res.value
            })
            // 工资概览
            this.getWageTotal()
            // 项目统计
            this.getProjectTotal()
            // 工资列表
            this.getWgWageManage()
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=wage' })
            },

            
            // 工资概览
            getWageTotal(){
                // // console.log('工资概览-参数',this.prameter)
                this.$request(this, this.$apis.wageSalaryByPtype, this.prameter).then(res => {
                    // console.log('工资概览',res)
                    this.wageGeneral.map((v,i)=>{
                        v.value = res[i].salary
                    })
                }).then()
            },
            // 项目统计
            getProjectTotal(){
                const prameter = JSON.parse(JSON.stringify(this.prameter))
                prameter['salaryDate'] = this.dateMonthText
                // // console.log('项目统计-参数',prameter)
                this.$request(this, this.$apis.wgProjectTotal, prameter).then(res => {
                    // console.log('项目统计',res)
                    this.projects.series = [ { data: [], format: 'yAxisDemo1' } ]
                    res.map((v,i)=>{
                        this.projects.series[0].data.push({
                            name: v.projectType+' '+v.salary,
                            value: v.salary,
                            label: v.projectType,
                        })
                    })
                }).then()
            },
            // 工资列表
            getWgWageManage(){
                uni.showLoading({ title:'工资列表加载中' })
                const prameter = Object.assign( this.prameter,this.paging)
                // console.log('工资列表-参数',prameter)
                this.$request(this, this.$apis.wgWageManage,prameter).then(res => {
                    // console.log('工资列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.total = 0
                        this.page.status = 'nomore'
                        this.$tools.uToast(this,'default','','暂未查询到更多工资相关数据',3000)
                    }
                }).then()
            },

            
            // 下拉选择
            select(e){
                this.prameter[e.type] = e.value
                // 工资概览
                this.getWageTotal()
                // 项目统计
                this.getProjectTotal()
                // 工资列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getWgWageManage()
            },
            // 筛选时间
            confirm(e){
                this.dateMonth = e.value
                this.dateMonthText = this.$tools.formatTime(new Date(e.value)).ym
                this.dateShow = false
                // 项目统计
                this.getProjectTotal()
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
        // 项目统计
        .uni-echarts-box{
            // 日期
            .date-month{
                position: absolute;
                top: 36rpx;
                right: 30rpx;
            }
        }
    }
</style>
